<template>
  <div class="template-container" style="z-index: 100">
    <TableVue></TableVue>
    <a-modal v-model:visible="showForm" title-align="start" :footer="false" :mask-closable="false">
      <FormVue></FormVue>
    </a-modal>
    <Board />
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import Board from "./board/Board.vue";
import { componentList } from "./board/data/data";
import { showBoard, showForm } from "./data/form";
import FormVue from "./form/Form.vue";
import TableVue from "./table/table.vue";
import { edit } from "./data/curd";
import { resetQuery } from "./data/table";

const route = useRoute();
const { id } = route.query;
if (id) {
  edit(`${id}`);
}
onUnmounted(() => {
  showBoard.value = false;
  componentList.value = [];
  resetQuery();
});
</script>

<style lang="scss" scoped></style>
